<template>
  <basicModal
    ref="modalRef"
    class="cropperModal"
    @register="modalRegister"
    @before-ok="handleOk"
    :modal-style="{ width: '800px' }"
  >
    <template #default>
      <div class="cropper-box">
        <div class="cropper-box-left">
          <div class="cropper-box-left-cropper">
            <CropperImage
              v-if="src"
              :circled="circled"
              :src="src"
              height="300px"
              @cropend="handleCropend"
              @ready="handleReady"
            />
          </div>
          <div class="cropper-box-left-toolbar">
            <a-upload
              :showFileList="false"
              :auto-upload="false"
              accept="image/*"
              action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
              @change="beforeUpload"
            >
              <template #upload-button>
                <a-tooltip placement="bottom" trigger="hover">
                  <template #content> 上传图片 </template>
                  <a-button size="small" type="primary">
                    <template #icon>
                      <UploadOutlined class="arco-icon" />
                    </template>
                  </a-button>
                </a-tooltip>
              </template>
            </a-upload>
            <a-space>
              <a-tooltip placement="bottom" trigger="hover">
                <template #content> 重置 </template>
                <a-button
                  :disabled="!src"
                  size="small"
                  type="primary"
                  @click="handlerToolbar('reset')"
                >
                  <template #icon>
                    <ReloadOutlined class="arco-icon" />
                  </template>
                </a-button>
              </a-tooltip>
              <a-tooltip placement="bottom" trigger="hover">
                <template #content> 逆时针旋转 </template>
                <a-button
                  :disabled="!src"
                  size="small"
                  type="primary"
                  @click="handlerToolbar('rotate', -45)"
                >
                  <template #icon>
                    <RotateLeftOutlined class="arco-icon" />
                  </template>
                </a-button>
              </a-tooltip>
              <a-tooltip placement="bottom" trigger="hover">
                <template #content> 顺时针旋转 </template>
                <a-button
                  :disabled="!src"
                  size="small"
                  type="primary"
                  @click="handlerToolbar('rotate', 45)"
                >
                  <template #icon>
                    <RotateRightOutlined class="arco-icon" />
                  </template>
                </a-button>
              </a-tooltip>
              <a-tooltip placement="bottom" trigger="hover">
                <template #content> 水平翻转 </template>
                <a-button
                  :disabled="!src"
                  size="small"
                  type="primary"
                  @click="handlerToolbar('scaleX')"
                >
                  <template #icon>
                    <SwapOutlined class="arco-icon" />
                  </template>
                </a-button>
              </a-tooltip>
              <a-tooltip placement="bottom" trigger="hover">
                <template #content> 垂直翻转 </template>
                <a-button
                  :disabled="!src"
                  size="small"
                  type="primary"
                  @click="handlerToolbar('scaleY')"
                >
                  <template #icon>
                    <VerticalAlignMiddleOutlined class="arco-icon" />
                  </template>
                </a-button>
              </a-tooltip>
              <a-tooltip placement="bottom" trigger="hover">
                <template #content> 放大 </template>
                <a-button
                  :disabled="!src"
                  size="small"
                  type="primary"
                  @click="handlerToolbar('zoom', 0.1)"
                >
                  <template #icon>
                    <ZoomInOutlined class="arco-icon" />
                  </template>
                </a-button>
              </a-tooltip>
              <a-tooltip placement="bottom" trigger="hover">
                <template #content> 缩小 </template>
                <a-button
                  :disabled="!src"
                  size="small"
                  type="primary"
                  @click="handlerToolbar('zoom', -0.1)"
                >
                  <template #icon>
                    <ZoomOutOutlined class="arco-icon" />
                  </template>
                </a-button>
              </a-tooltip>
            </a-space>
          </div>
        </div>
        <div class="cropper-box-right">
          <div
            :class="{ 'cropper-box-right-preview-radius': circled }"
            class="cropper-box-right-preview"
          >
            <img v-if="previewSource" :src="previewSource" />
          </div>
          <template v-if="previewSource">
            <div class="cropper-box-right-group">
              <a-avatar><img :src="previewSource" /></a-avatar>
              <a-avatar :size="48"><img :src="previewSource" /></a-avatar>
              <a-avatar :size="64"><img :src="previewSource" /></a-avatar>
              <a-avatar :size="80"><img :src="previewSource" /></a-avatar>
            </div>
          </template>
        </div>
      </div>
    </template>
  </basicModal>
</template>

<script lang="ts" setup>
  import type { CropendResult, Cropper } from './typing';
  import { ref } from 'vue';
  import { Message } from '@arco-design/web-vue';
  import { basicModal, useModal } from '@/components/Modal';
  import CropperImage from './CropperImage.vue';
  import { dataURLtoBlob } from '@/utils/file/base64Conver';
  import { isFunction } from '@/utils/is';
  import {
    UploadOutlined,
    ReloadOutlined,
    RotateLeftOutlined,
    RotateRightOutlined,
    SwapOutlined,
    VerticalAlignMiddleOutlined,
    ZoomInOutlined,
    ZoomOutOutlined,
  } from '@vicons/antd';

  const props = defineProps({
    title: { type: String, default: '图片上传' },
    circled: { type: Boolean, default: false },
    uploadApi: {
      type: Function as PropType<(params) => Promise<any>>,
    },
  });

  const emit = defineEmits(['uploadSuccess', 'register']);

  const modalRef = ref(null);

  let filename = '';
  const src = ref('');
  const previewSource = ref('');
  const cropper = ref<Cropper>();
  let scaleX = 1;
  let scaleY = 1;

  const [modalRegister, { openModal, closeModal, setSubLoading }] = useModal({
    title: props.title,
  });

  // 上传图片
  function beforeUpload(e) {
    const fileInfo = e[e.length - 1];
    const reader = new FileReader();
    reader.readAsDataURL(fileInfo.file);
    src.value = '';
    previewSource.value = '';
    reader.onload = function (e) {
      src.value = (e.target?.result as string) ?? '';
      filename = fileInfo.file.name;
    };
    return false;
  }

  function handleCropend({ imgBase64 }: CropendResult) {
    previewSource.value = imgBase64;
  }

  function handleReady(cropperInstance: Cropper) {
    cropper.value = cropperInstance;
  }

  function handlerToolbar(event: string, arg?: number) {
    if (event === 'scaleX') {
      scaleX = arg = scaleX === -1 ? 1 : -1;
    }
    if (event === 'scaleY') {
      scaleY = arg = scaleY === -1 ? 1 : -1;
    }
    cropper?.value?.[event]?.(arg);
  }

  async function handleOk() {
    if (!src.value) {
      setSubLoading(false);
      return Message.error('请先上传图片');
    }
    const uploadApi = props.uploadApi;
    if (uploadApi && isFunction(uploadApi)) {
      const blob = dataURLtoBlob(previewSource.value);
      try {
        setSubLoading(true);
        const result = await uploadApi({ name: 'file', file: blob, filename });
        emit('uploadSuccess', { source: previewSource.value, data: result.data });
        closeModal();
      } finally {
        setSubLoading(false);
      }
    }
  }

  defineExpose({
    openModal,
  });
</script>

<style lang="less" scoped>
  .cropper-box {
    display: flex;

    &-left,
    &-right {
      height: 340px;
    }

    &-left {
      width: 55%;

      &-cropper {
        height: 300px;
        background: #eee;
        background-image: linear-gradient(
            45deg,
            rgba(0, 0, 0, 0.25) 25%,
            transparent 0,
            transparent 75%,
            rgba(0, 0, 0, 0.25) 0
          ),
          linear-gradient(
            45deg,
            rgba(0, 0, 0, 0.25) 25%,
            transparent 0,
            transparent 75%,
            rgba(0, 0, 0, 0.25) 0
          );
        background-position: 0 0, 12px 12px;
        background-size: 25px 25px;
      }

      &-toolbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;
      }
    }

    &-right {
      width: 45%;
      margin-left: 17px;

      &-preview {
        width: 220px;
        height: 220px;
        margin: 0 auto;
        overflow: hidden;
        border: 1px solid #ddd;

        img {
          width: 100%;
          height: 100%;
        }
      }

      &-preview-radius {
        border-radius: 50%;
      }

      &-group {
        display: flex;
        padding-top: 8px;
        margin-top: 8px;
        border-top: 1px solid #d9d9d9;
        justify-content: space-around;
        align-items: center;
      }
    }
  }
</style>
